
<template>
  <div>

    <h2>双向绑定指令</h2>
    <!-- 单向绑定： 数据改了页面效果也会改 -->
    <!-- <input type="text" :value="str" /> -->

    <!-- 双向绑定：数据改了页面效果会改， 页面改了数据也会改 -->
    <!-- <input type="text" v-model="str" /> -->

    <!-- 双向绑定指令的常用修饰符有：
      ● .number 自动将用户输入的值转为数值类型（输入数字有效）
      ● .trim 去除字符串首尾的空白字符
      ● .lazy 在 "change"时，而非"input"时更新（失去焦点时才更新数据）
    -->

    姓名: <input type="text" v-model.trim="form.uname" /><br />
    年龄: <input type="text" v-model.number="form.age" /><br />
    薪资: <input type="text" v-model.number.lazy="form.salary" /><br />
    <button @click="onAdd">确认添加</button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // str: '你好世界'
      form: {
        uname: '',
        age: '',
        salary: ''
      }
    }
  },
  methods: {
   onAdd() {
    console.log('你提交的数据是：', this.form)
   } 
  }
}
</script>

<style>

</style>